/* 系统主页 */
import React from 'react';
import { connect } from 'dva';
import { Layout, Breadcrumb, Icon, Table } from 'antd';

import LayoutHeader from '../../../components/layout/AdminHeaderLayout';
import LayoutSider from '../../../components/layout/AdminSiderLayout';
import LayoutFooter from '../../../components/layout/AdminFooterLayout';


import HomePageTable from './HomePageTable';


const { Content } = Layout;


let dataSource = [];

for (let i = 0; i < 7789; i++) {
  dataSource.push({
    key: i,
    name: `姓名 ${i}`,
    age: `${i} 岁`,
    address: `London, Park Lane no. ${i}`,
    description: `My name is 姓名 ${i}, I am ${i} years old, living in London, Park Lane no. ${i} Lake Park. This is my description ${i}.`,
  });
}

const columns = [{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
  width: 150,
}, {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
  width: 150,
}, {
  title: '住址',
  dataIndex: 'address',
  key: 'address',
  width: 350,
}, {
  title: 'Action',
  key: 'action',
  render: (text, record) => (
    <span>
      <a href="#">Action 一 {record.key}</a>
      <span className="ant-divider" />
      <a href="#">Delete - {record.name}</a>
      <span className="ant-divider" />
      <a href="#" className="ant-dropdown-link">
        More actions <Icon type="down" />
      </a>
    </span>
  ),
}];

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === '姓名 2',    // Column configuration not to be checked
  }),
};

const pagination = {
  total: dataSource.length,
  showSizeChanger: true,
  onShowSizeChange: (current, pageSize) => {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange: (current) => {
    console.log('Current: ', current);
  },
};




function HomePage() {
  return (
    <Layout>

      <LayoutHeader />

	    <Sider className="admin-sider"><LayoutSider /></Sider>

      <Content className="admin-content">
        <Breadcrumb style={{ margin: '15px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Table
          rowKey='key'
          rowSelection={rowSelection}
          dataSource={dataSource}
          columns={columns}
          pagination={pagination}
          expandedRowRender={record => <p>{record.description}</p>}
          className="table"
          // scroll={{ y: 240 }}
          bordered
            title={() => '本地数据'}
            footer={() => '表格脚步信息'}
            // loading={true}
        />
        <br />
        <HomePageTable />

      </Content>

	    <LayoutFooter />
	  </Layout>


	)
}

export default connect()(HomePage);
